<script setup>
/**
 * @import libs
 */
import { storeToRefs } from 'pinia'

/**
 * @import pinia stores
 */

//pinia -> useIndexStaticMessStore
import { useIndexStaticMessStore } from '@/stores/index/indexStaticMess'

/**
 * @param navTopBarList 顶部导航栏数据列表
 */
let { navTopBarList } = storeToRefs(useIndexStaticMessStore())

//pinia -> useHomePageStore
import { useHomePageStore } from '@/stores/index/homePage'

/**
 * @function changeSelectedTopBar 切换选择的主页顶部导航栏下标
 * @function searchIconClick 搜索图标被点击
 * @function settingIconClick 设置图标被点击
 * @function messageIconClick 消息图标被点击
 */
const { changeSelectedTopBar ,searchIconClick,settingIconClick,messageIconClick} = useHomePageStore()

/**
 * @param selectedTopBarIndex 主页顶部导航栏下标
 */
let { selectedTopBarIndex } = storeToRefs(useHomePageStore())

/**
 * 点击切换主页顶部导航栏下标
 * @param e `@click` 事件参数
 * @returns 
 */
const handNavTopBarClick = (e) => {

    //判断数据是否存在
    if (e?.target?.dataset?.index === undefined) {
        return
    }

    const index = e.target.dataset.index;//被点击的主页顶部导航栏下标

    //判断类型是否为number
    if (typeof index !== 'number') {
        console.error('index is not a number')
        return
    }

    changeSelectedTopBar(index)
}

/**
 * 搜素图标点击事件
 */
const searchIconClickEvent = () => {
    searchIconClick()
}

</script>

<template>
    <div class="top-tab-bar">
        <div class="left-icons">
            <image class="icon-class" @click.stop="searchIconClickEvent" src="@/static/icons/search.svg" mode="scaleToFill" />
        </div>

        <div>
            <ul class="nav-list" @click="handNavTopBarClick">
                <li :class="{ 'nav-active': selectedTopBarIndex === index }" v-for="(item, index) in navTopBarList"
                    :data-index="item.id">{{ item.name }}</li>
            </ul>
        </div>

        <div class="right-icons">
            <image class="icon-class" @click.stop="settingIconClick" src="@/static/icons/setting.svg" mode="scaleToFill" />
            <image class="icon-class" @click.stop="messageIconClick" src="@/static/icons/notice.svg" mode="scaleToFill" />
        </div>
    </div>
</template>

<style scoped>

.left-icons {
    width: 140rpx;
}

.nav-list {
    display: flex;
    justify-content: space-between;
    width: 300rpx;
    color: #c57300;
    font-size: 30rpx;
    line-height: 50rpx;
    margin-right: 30rpx;
}

.top-tab-bar {
    display: flex;
    justify-content: space-between;
    margin: 0 60rpx;
}

.icon-class {
    width: 50rpx;
    height: 50rpx;
}

.right-icons {
    display: flex;
    justify-content: space-between;
    width: 120rpx;
}

.nav-active::after {
    content: "";
    display: block;
    width: 30rpx;
    height: 4rpx;
    background-color: #c57300;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
</style>